<template>
  <el-card header="证件信息" class="form-section">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="证件类型" prop="id_type">
          <el-select
            v-model="formData.id_type"
            placeholder="请选择证件类型"
            clearable
            style="width: 100%"
            @change="handleIdTypeChange"
            @focus="handleFocus"
            @blur="handleBlur"
          >
            <el-option label="身份证" :value="1" />
            <el-option label="护照" :value="2" />
            <el-option label="营业执照" :value="3" />
            <el-option label="组织机构代码证" :value="4" />
            <el-option label="其他" :value="5" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="证件号码" prop="id_number">
          <el-input
            v-model="formData.id_number"
            placeholder="请输入证件号码"
            clearable
            maxlength="50"
            @focus="handleFocus"
            @blur="handleBlur"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="法定代表人" prop="legal_person">
          <el-input
            v-model="formData.legal_person"
            placeholder="请输入法定代表人姓名"
            clearable
            maxlength="50"
            @focus="handleFocus"
            @blur="handleBlur"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'

  const props = defineProps({
    modelValue: {
      type: Object,
      default: () => ({}),
    },
  })

  const emit = defineEmits(['change'])

  // 直接使用props.modelValue，避免尝试重新赋值整个对象
  const formData = computed(() => props.modelValue)

  // 防止标签点击事件标记
  const isLabelClicked = ref(false)

  // 处理标签点击事件
  const handleLabelClick = () => {
    console.log('证件信息标签被点击，标记为标签点击')
    isLabelClicked.value = true

    // 延迟重置标记，给其他事件时间处理
    setTimeout(() => {
      isLabelClicked.value = false
    }, 100)
  }

  // 处理证件类型变化
  const handleIdTypeChange = (value: number) => {
    console.log('证件类型变化处理', value)
    emit('change', { field: 'id_type', value })
  }

  // 处理控件聚焦事件
  const handleFocus = (event: any) => {
    console.log('证件信息控件聚焦事件', event)
    if (isLabelClicked.value) {
      console.log('标签点击引起的证件信息控件聚焦事件，已屏蔽')
    }
  }

  // 处理控件失焦事件
  const handleBlur = (event: any) => {
    console.log('证件信息控件失焦事件', event)
  }
</script>

<style scoped>
  .form-section {
    margin-bottom: 20px;
  }

  /* 防止标签点击的样式方案 */
  :deep(.el-form-item__label) {
    cursor: default;
    user-select: none;
  }

  /* 选择器标签样式 */
  :deep(.el-select .el-input__inner) {
    user-select: none;
  }

  /* 输入框标签样式 */
  :deep(.el-input .el-input__inner) {
    user-select: none;
  }
</style>
